<template>
	<div ref="mgrDialog" class="dialog-wrap">
		
		<el-dialog 
			:title="headerTitle" 
			width="70%" 
			:visible.sync="DialogVisible"
			@close="dialogClose"
		>
			
			<el-row :gutter="20">

				<el-form 
					v-if = "editForm != null"
					size="mini"
					ref="dialogForm"
					:rules="rules"
					:label-width="formLabelWidth"
					:model.sync="editForm">
					
					<el-col :span="12">
						<el-form-item label="菜单名称" prop="name">
		      				<el-input v-model="editForm.name" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="路由名称" prop="url">
		      				<el-input v-model="editForm.url" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="上级菜单" prop="pid">
		      				
		    				<select-tree
		    					class="width-full"
		    					v-model="editForm.pid"
		    					:name.sync="editForm.pcodeName"
		    					:code.sync="editForm.pcode"
		    					:data.sync="menus"
		    					@selected="pcodeSelect"
		    				></select-tree>

		    			</el-form-item>
		    		</el-col>

		    		
		    		<el-col :span="12">	
		    			<el-form-item label="菜单图标">
		      				<el-input v-model="editForm.icon" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="菜单编号" prop="code">
		      				<el-input v-model="editForm.code" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">	
		    			<el-form-item label="菜单排序" prop="sort">
		      				<el-input v-model="editForm.sort" autocomplete="off" type="number"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">	
		    			<el-form-item label="是否菜单" prop="menuFlag">
		    				<el-radio-group v-model="editForm.menuFlag">
		    					<el-radio label="Y">是</el-radio>
		    					<el-radio label="N">否</el-radio>
		    				</el-radio-group>
		      				
		    			</el-form-item>
		    		</el-col>		
				</el-form>
			</el-row>
			
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="confirm">确认</el-button>
			    <el-button size="mini" type="danger" @click="cancel">取消</el-button>
			</div>	
		</el-dialog>

	</div>
</template>


<script>
import { getMenuTree } from "@/api/admin/menu";	
import { convertDataToTree,deepClone } from "@/utils/util"
import SelectTree from "@/components/SelectTree"
export default{
	components:{
		SelectTree
	},
	props:{
		//新增还是编辑
	    type:{
	      type:[Number,String],
	      defalut:1
	    },
		visible:{
			type:Boolean,
			default:false
		},
		form:{
			type:Object,
			default:null
		}
	},
	watch:{
		visible(val){
			this.DialogVisible = val;
			if(this.form == null){
				this.editForm = deepClone(this.defaultForm);
			}else{
				this.editForm = this.form;
			}

			//打开时更新原始数据
			if(val){
				//获取菜单列表
				this.getMenuList();
			}
		},
		type(newVal,oldVal){
	      	if(newVal == 1){
	        	this.headerTitle = "添加菜单"
	      	}else if(newVal == 2){
	        	this.headerTitle = "修改用户"
	      	}
	    }
	},
	data(){
		return{
			headerTitle:"修改菜单",
			DialogVisible:false,
			defaultForm:{
				name:'',
				pcode:'0',
				pid:0,
				pcodeName:'顶级',
				menuFlag:'Y',
				url:'',
				icon:'',
				sort:'',
				systemType:'BASE_SYSTEM'
			},
			editForm:null,
			//验证规则
		    rules:{
		        name:[{required:true,message:"请输入菜单名称",trigger:"blur"}],
		        code:[{required:true,message:"请输入菜单编码",trigger:"blur"}],
		        pid:[{required:true,message:"请输入父级编号",trigger:"blur"}],
		        menuFlag:[{required:true,message:"请选择菜单",trigger:"blur"}],
		        url:[{required:true,message:"请输入请求地址",trigger:"blur"}],
		        sort:[{required:true,message:"请输入排序",trigger:"blur"}],
		    },
			formLabelWidth:'100px',
			menus:[],
			
		}
	},
	mounted(){
		console.log("----dialog/menuEditDialog-----mounted------------")
		//获取菜单列表
		this.getMenuList();
	},
	methods:{
		//获取菜单列表
		getMenuList(){
			getMenuTree().then((res)=>{
				this.menus = convertDataToTree(res.data);
				console.log("%c系统菜单管理选择父级菜单获取菜单列表","background:#f03;color:#fff")
				console.log(this.menus)
			})
		},
		reset(){
			this.editForm = null;
			this.DialogVisible = false;
		},
		dialogClose(){
			this.cancel();
		},
		//取消按钮
		cancel(){
			this.$emit('cancel');
			this.reset()
		},
		confirm(){
			this.$refs.dialogForm.validate((valid)=>{
		        if (valid) {
		          	this.editForm.pid = this.editForm.pid+'';
		          	
		        	console.log("%c添加菜单提交的数据","background:#009;color:#fff")
		        	console.log(this.editForm)
		        	

		          	//删掉pcode
		          	delete this.editForm.pcode;


		          	console.log("%c***********","background:#009;color:#fff")
		          	console.log(this.editForm)
		          	this.$emit('confirm',{type:this.type,data:this.editForm});
		          	this.reset()
		        } else {
		           
		            return false;
		        }

      		})
		},
		pcodeSelect(obj){
			console.log("--------选中的父元素----------")
			console.log(obj)
			this.editForm.pid = obj.id;
			this.editForm.pcodeName = obj.name;
		}

	}
}


</script>

<style scoped>
	
</style>